<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挑战与解决方案</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#7CB305',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(22, 93, 255, 0.1)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-fade-in {
                animation: fadeIn 0.8s ease-out forwards;
            }
            .animate-slide-up {
                animation: slideUp 0.8s ease-out forwards;
            }
            .animate-slide-right {
                animation: slideRight 0.8s ease-out forwards;
            }
            .scale-hover {
                transition: transform 0.3s ease;
            }
            .scale-hover:hover {
                transform: scale(1.03);
            }
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(30px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideRight {
            from { 
                opacity: 0;
                transform: translateX(-30px);
            }
            to { 
                opacity: 1;
                transform: translateX(0);
            }
        }
    </style>
</head>
<body class="font-inter bg-white overflow-x-hidden">
    <!-- 幻灯片容器 -->
    <div class="w-[1280px] min-h-[720px] bg-white shadow-xl mx-auto relative overflow-hidden">
        <!-- 背景装饰元素 -->
        <div class="absolute top-0 right-0 w-1/3 h-1/3 bg-primary/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
        <div class="absolute bottom-0 left-0 w-1/4 h-1/4 bg-secondary/5 rounded-full translate-y-1/2 -translate-x-1/2"></div>
        
        <!-- 标题区域 -->
        <div class="relative pt-16 px-16">
            <h1 class="text-[clamp(2.5rem,5vw,3.5rem)] font-bold text-primary mb-2 tracking-tight animate-fade-in">
                挑战与解决方案
            </h1>
            <div class="w-32 h-1.5 bg-gradient-blue rounded-full mb-12 animate-slide-right"></div>
        </div>
        
        <!-- 内容区域 -->
        <div class="px-16 pb-16 grid grid-cols-1 md:grid-cols-2 gap-10">
            <!-- 挑战部分 -->
            <div class="space-y-8 opacity-0" id="challenges-container">
                <div class="bg-white rounded-xl shadow-card p-8 scale-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-exclamation-triangle text-primary text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-neutral-dark">技术难题</h2>
                    </div>
                    <p class="text-gray-600 leading-relaxed">
                        项目初期面临第三方API集成不稳定的问题，导致数据同步延迟和错误率高达30%，严重影响了系统的可靠性和用户体验。
                    </p>
                </div>
                
                <div class="bg-white rounded-xl shadow-card p-8 scale-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-clock text-primary text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-neutral-dark">时间限制</h2>
                    </div>
                    <p class="text-gray-600 leading-relaxed">
                        由于需求变更频繁，原计划3个月的开发周期被压缩至2个月，导致团队面临巨大的时间压力，部分功能实现面临简化风险。
                    </p>
                </div>
                
                <div class="bg-white rounded-xl shadow-card p-8 scale-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-users text-primary text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-neutral-dark">团队协作</h2>
                    </div>
                    <p class="text-gray-600 leading-relaxed">
                        跨部门协作中出现沟通不畅的情况，需求理解偏差导致部分功能返工，项目进度受到一定影响，团队士气也有所波动。
                    </p>
                </div>
            </div>
            
            <!-- 解决方案部分 -->
            <div class="space-y-8 opacity-0" id="solutions-container">
                <div class="bg-white rounded-xl shadow-card p-8 scale-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-lightbulb text-accent text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-neutral-dark">技术解决方案</h2>
                    </div>
                    <p class="text-gray-600 leading-relaxed">
                        重新设计API集成层，引入本地缓存机制和重试策略，同时开发监控系统实时预警异常。实施后，数据同步成功率提升至99%，响应时间缩短50%。
                    </p>
                </div>
                
                <div class="bg-white rounded-xl shadow-card p-8 scale-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-calendar-check text-accent text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-neutral-dark">时间管理策略</h2>
                    </div>
                    <p class="text-gray-600 leading-relaxed">
                        采用敏捷开发方法，重新规划冲刺周期，优化任务优先级，集中资源确保核心功能。通过加班和周末轮班，最终提前3天完成所有核心功能。
                    </p>
                </div>
                
                <div class="bg-white rounded-xl shadow-card p-8 scale-hover">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mr-4">
                            <i class="fa-solid fa-comments text-accent text-xl"></i>
                        </div>
                        <h2 class="text-xl font-semibold text-neutral-dark">团队协作优化</h2>
                    </div>
                    <p class="text-gray-600 leading-relaxed">
                        每日举行15分钟站会同步进展，建立跨部门共享文档平台，明确各角色职责。引入需求评审和技术方案评审机制，减少返工率，团队协作效率提升40%。
                    </p>
                </div>
            </div>
        </div>
        
        <!-- 图表区域 -->
        <div class="px-16 pb-16 opacity-0" id="chart-container">
            <div class="bg-white rounded-xl shadow-card p-8">
                <h3 class="text-xl font-semibold text-neutral-dark mb-6">挑战解决效果对比</h3>
                <div class="w-full h-64">
                    <canvas id="challengeChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="absolute bottom-6 left-16 right-16 flex justify-between items-center">
            <div class="text-sm text-gray-500">
                项目汇报演示
            </div>
            <div class="text-sm text-gray-500">
                幻灯片 4/6
            </div>
        </div>
    </div>

    <script>
        // 页面加载完成后执行动画
        document.addEventListener('DOMContentLoaded', function() {
            // 延迟显示挑战部分
            setTimeout(() => {
                const challengesContainer = document.getElementById('challenges-container');
                challengesContainer.classList.add('animate-fade-in');
                challengesContainer.style.opacity = 1;
                
                // 逐个显示挑战卡片
                const challengeCards = challengesContainer.querySelectorAll('.scale-hover');
                challengeCards.forEach((card, index) => {
                    setTimeout(() => {
                        card.classList.add('animate-slide-up');
                    }, 200 * (index + 1));
                });
                
                // 延迟显示解决方案部分
                setTimeout(() => {
                    const solutionsContainer = document.getElementById('solutions-container');
                    solutionsContainer.classList.add('animate-fade-in');
                    solutionsContainer.style.opacity = 1;
                    
                    // 逐个显示解决方案卡片
                    const solutionCards = solutionsContainer.querySelectorAll('.scale-hover');
                    solutionCards.forEach((card, index) => {
                        setTimeout(() => {
                            card.classList.add('animate-slide-up');
                        }, 200 * (index + 1));
                    });
                    
                    // 延迟显示图表
                    setTimeout(() => {
                        const chartContainer = document.getElementById('chart-container');
                        chartContainer.classList.add('animate-fade-in');
                        chartContainer.style.opacity = 1;
                        
                        // 初始化图表
                        initChart();
                    }, 1000);
                }, 1000);
            }, 500);
        });
        
        // 初始化图表
        function initChart() {
            const ctx = document.getElementById('challengeChart').getContext('2d');
            
            const chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['API稳定性', '开发效率', '沟通效率'],
                    datasets: [
                        {
                            label: '挑战前',
                            data: [30, 40, 35],
                            backgroundColor: 'rgba(22, 93, 255, 0.3)',
                            borderColor: 'rgba(22, 93, 255, 1)',
                            borderWidth: 1
                        },
                        {
                            label: '挑战后',
                            data: [99, 85, 75],
                            backgroundColor: 'rgba(124, 179, 5, 0.3)',
                            borderColor: 'rgba(124, 179, 5, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            title: {
                                display: true,
                                text: '百分比 (%)'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: false
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>
    